Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Date Picker Input Mask
We can enforce the date picker’s date format with an input mask.
To add it, we add the mask
prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="teal">
{{ date }}
</q-badge>
<div>
<q-date v-model="date" mask="YYYY-MM-DD"> </q-date>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
We can add a mark with escaped characters by escaping them with the [
and ]
characters:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="teal">
{{ date }}
</q-badge>
<div>
<q-date v-model="date" mask="[Month ( ]MMMM ) Do[, Year ( ]YYYY )">
</q-date>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
Date Picker Locale
We can set the date picker locale with the locale
prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="teal">
{{ date }}
</q-badge>
<div>
<q-date v-model="date" :locale="locale"> </q-date>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined,
locale: {
days: "Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado".split(
"_"
),
daysShort: "Dom_Lun_Mar_Mié_Jue_Vie_Sáb".split("_"),
months: "Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split(
"_"
),
monthsShort: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Sep_Oct_Nov_Dic".split(
"_"
),
firstDayOfWeek: 1
}
}
});
</script>
</body>
</html>
We can set the locale
prop to change the text of the days and months.
days
sets the days text. daysShort
sets the day abbreviations.
months
sets the months text. monthsShort
sets the month abbreviations.
firstDayOfWeek
sets the first day of the week.
Date Picker Color
We can set the color of the top bar with the color
prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date color="orange" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
Conclusion
We can set various options for the date picker Quasar’s q-date
component.